<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志</title>
<link rel="stylesheet" type="text/css" href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
    <style>
        h2{
            padding-left: 7%;
            color: #00FF00;
        }
        .main{
            width: 60%;
            margin-left: 10%;
        }

    </style>
</head>
<body>
<div>
    <h2><span class="glyphicon glyphicon-plus" id="addnotice">发送邮件</span></h2>
     
   <div class="main">
       <div>
           <form method="post" action="../sendEmail" id="mail_form">
               <table class="table">
                   <tr>
                       <td>收件人</td>
                       <td>
                          <input type="text" name="edirection_id" id="contacts" />
                         <span id="adds1">添加联系人</span>
                       </td>
                   </tr>
                   <tr>
                       <td>邮件主题</td>
                       <td><input type="text" name="etitle"></td>
                   </tr>
                   <tr>
                       <td>邮件内容</td>
                       <td>
                           <textarea cols="50" rows="10" name="econtent" id="wcontent"></textarea>
                       </td>
                   </tr>
                   <tr>
                     <td colspan="2" ><button class="btn btn-info" id="form-submit">提交</button></td>
                   </tr>
               </table>
           </form>
		</div>

<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"> 添加联系人</div>
                <div class="modal-body" id="s7">
                	<!-- <ul>
                	  <li v-for="user in userList"><input name="checkbox" type="checkbox" value="{{user.username}}" />{{user.uname}}</li>
                	</ul> -->
                	<table class="table table-hover">
							<thead>
					        	<tr class="info"><th>显示部门名称</th><th>显示员工名称</th></tr>
					        </thead>
					        <tbody id="tb">
					        	<tr>
					        	  <td id="tb1" class='error'>
					        	    <select id="deptno">
					        	      <option value="">请选择部门</option>
					        	      <option v-for="dept in deptList" value="{{dept.seorid}}">{{dept.seabout}}</option>
					        	    </select>
					        	  </td>
					        	  <td id="tb2">
					        	     <ul>
					        	       <li v-for="name in nameList" >
					        	        <input name="checkbox" type="checkbox" value="{{name.username}}" />{{name.uname}}
					        	       </li>
					        	     </ul>
					        	  </td>
					        	</tr>			
					        </tbody>
					        							
				   </table>		     
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" data-dismiss="modal" id="sure">确定</button>
                </div>
            </div>
        </div>
    </div>


       </div>
</div>

<script>
    $(function(){
        $("#adds1").click(function () {
        	 $("#add").modal("show");
        	 vue.getName();
        })
        
        var vue = new Vue({
        	el:"#s7", 
        	data:{deptList:"",nameList:""},
        	methods:{
        		getName : function(){
        			var _self = this;
        			$.ajax({
        				url:'../getIdandName',
        				type:'post',
        				dataType:'json',
        				success : function(result){
        					console.log(result);
        					_self.deptList = result;
        				}
        			})
        		},
        	   getUname : function(deptno){
        		   console.log(deptno);
        		   $.ajax({
        			   url:'../getListUser2',
        			   type:'post',
        			   data:{'deptno':deptno},
        			   dataType:'json',
        			   success : function(result){
        				   console.log(result);
        				   vue.nameList = result;
        			   }
        		   })
        	   }
        	}
        })
        
        $("#sure").click(function(){
        	var t1 = $("#contacts").val();
        	 var str="";
     		 $("input[name='checkbox']").each(function(){
     			 if($(this).prop("checked")==true){
     				 str +=$(this).val()+",";
     			 }
     		 })
     		 console.log(str);
     		 $("#contacts").val(t1+str);
        })
        
        $("#form-submit").click(function(){
        	$("#mail_form").submit();
        });
        
        $(document).on("change", "#deptno", function(){
        	var deptno = $("#deptno").val();
        	if(deptno==""){
        		return;
        	}
        	vue.getUname(deptno);
        })
        
    })
</script>
</body>
</html>